<script setup>
import { useRoute } from 'vue-router'
import { ref } from 'vue'
import { getOrderManagerOrderByIdAPI } from '@/services/orderManager'
import { reactive } from 'vue'
// 订单详情
defineOptions({
  name: 'OrderDetail',
})

const route = useRoute()
console.log(route)
let id = ref(0)
const getId = () => {
  id.value = route.query.id
}
getId()
console.log(id.value)

const orderList = reactive({
  amount: '',
  createTime: '',
  distance: '',
  estimatedArrivalTime: '',
  estimatedStartTime: '',
  id: '',
  mark: null,
  memberId: '',
  orderCargoDTOS: {},
  orderType: '',
  page: null,
  pageSize: null,
  paymentMethod: '',
  paymentStatus: '',
  pickupType: '',
  receiverAddress: '',
  receiverCity: {},
  receiverCounty: {},
  receiverName: '',
  receiverPhone: '',
  receiverProvince: {},
  senderCity: {},
  senderCounty: {},
  senderName: '',
  senderPhone: '',
  senderProvince: {},
  status: '',
  taskDispatch: null,
  taskPickup: {},
  taskRejectionDispatch: null,
  transportOrder: { id: '' },
  transportOrderPointVOS: [],
  updated: '',
})

const getList = async () => {
  const res = await getOrderManagerOrderByIdAPI('4010413472815286168')
  console.log(res)
  Object.assign(orderList, res.data)
  // orderList = res.data
  console.log(orderList)
}
getList()

// 初始化地图
// let map = null
// const initMap = () => {
//   map = new window.BMapGL.Map('mapContainer')
//   map.enableScrollWheelZoom(true)
//   var point = new window.BMapGL.Point(116.404, 39.915)
//   map.centerAndZoom(point, 15)
// }
// initMap()
// let map = new window.BMapGL.Map('mapContainer') // 创建Map实例
// map.centerAndZoom('上海市', 12) // 初始化地图,设置中心点坐标和地图级别
// map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
// 创建地图实例
// var map = new window.BMapGL.Map('mapContainer')

// // 设置地图中心点和缩放级别
// var point = new window.BMapGL.Point(116.404, 39.915) // 例如：116.404, 39.915 表示北京天安门
// map.centerAndZoom(point, 15) // 例如：15 表示缩放级别为15

// 添加地图控件
// map.addControl(new window.BMapGL.NavigationControl()) // 添加缩放平移控件
// map.addControl(new window.BMapGL.ScaleControl()) // 添加比例尺控件

const getStatusText = (status) => {
  if (status === 22000) {
    return '已关闭'
  } else if (status === 23000) {
    return '待取件'
  } else if (status === 23001) {
    return '已取件'
  } else if (status === 23002) {
    return '网点自寄'
  } else if (status === 23003) {
    return '网点入口'
  } else {
    return '已签收'
  }
}
const getMethodText = (paymentMethod) => {
  if (paymentMethod === '1') {
    return '预结'
  } else {
    return '到付'
  }
}

const getPayStatusText = (paymentStatus) => {
  if (paymentStatus === '1') {
    return '未付'
  } else {
    return '已付'
  }
}

const getPickupText = (pickupType) => {
  if (pickupType === '1') {
    return '网点自寄'
  } else {
    return '上门取件'
  }
}
</script>

<template>
  <div class="views">
    <a-descriptions>
      <a-descriptions-item label="订单编号">{{ orderList.id }}</a-descriptions-item>
      <a-descriptions-item label="运单编号">{{ orderList.transportOrder.id }}</a-descriptions-item>
      <a-descriptions-item label="下单时间">{{ orderList.createTime }}</a-descriptions-item>
      <a-descriptions-item label="订单状态">{{
        getStatusText(orderList.status)
      }}</a-descriptions-item>
      <a-descriptions-item label="预计到达时间">{{
        orderList.estimatedArrivalTime
      }}</a-descriptions-item>
    </a-descriptions>
  </div>
  <div class="message">
    <a-collapse style="background: rgb(248, 250, 255)" :default-active-key="['1']">
      <a-collapse-panel header="基本信息" :key="1">
        <a-descriptions title="发货方">
          <a-descriptions-item label="发货方姓名">{{ orderList.senderName }}</a-descriptions-item>
          <a-descriptions-item label="发货方电话">{{ orderList.senderPhone }}</a-descriptions-item>
          <a-descriptions-item label="发货方地址">{{
            orderList.senderAddress
          }}</a-descriptions-item>
          <a-descriptions-item label="详细地址"
            >{{ orderList.senderProvince.name }}{{ orderList.senderCity.name
            }}{{ orderList.senderCounty.name }}</a-descriptions-item
          >
        </a-descriptions>
        <div>
          <a-descriptions title="收货方">
            <a-descriptions-item label="收货方姓名">{{
              orderList.receiverName
            }}</a-descriptions-item>
            <a-descriptions-item label="收货方电话">{{
              orderList.receiverPhone
            }}</a-descriptions-item>
            <a-descriptions-item label="收货方地址"
              >{{ orderList.receiverProvince.name }}{{ orderList.receiverCity.name
              }}{{ orderList.receiverCounty.name }}</a-descriptions-item
            >
            <a-descriptions-item label="详细地址">{{
              orderList.receiverAddress
            }}</a-descriptions-item>
          </a-descriptions>
        </div>
        <div>
          <a-descriptions>
            <a-descriptions-item label="距离">{{ orderList.distance }} km</a-descriptions-item>
          </a-descriptions>
        </div>
        <div>
          <a-descriptions>
            <a-descriptions-item label="备注">暂无</a-descriptions-item>
          </a-descriptions>
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>

  <div class="gps">
    <a-collapse :default-active-key="['1']">
      <a-collapse-panel header="订单跟踪" style="background: rgb(248, 250, 255)" :key="1">
      </a-collapse-panel>
    </a-collapse>
  </div>

  <div class="guiji">
    <a-collapse :default-active-key="['1']">
      <a-collapse-panel header="订单轨迹" style="background: rgb(248, 250, 255)" :key="1">
        <!-- 地图开始 -->
        <div class="map-container" id="mapContainer">
          <!-- 地图 -->
        </div>
        <!-- 地图结束 -->
      </a-collapse-panel>
    </a-collapse>
  </div>

  <div class="qujian">
    <a-collapse :default-active-key="['1']">
      <a-collapse-panel header="取件信息" style="background: rgb(248, 250, 255)" :key="1">
        <a-descriptions>
          <a-descriptions-item label="所在网点">{{ orderList.id }}</a-descriptions-item>
          <a-descriptions-item label="取件类型">{{
            getPickupText(orderList.pickupType)
          }}</a-descriptions-item>
          <a-descriptions-item label="作业状态">{{ orderList.createTime }}</a-descriptions-item>
          <a-descriptions-item label="取件快递员">{{ orderList.senderName }}</a-descriptions-item>
          <a-descriptions-item label="快递员电话">{{
            orderList.receiverPhone
          }}</a-descriptions-item>
          <a-descriptions-item label="预计取件时间">{{
            orderList.estimatedStartTime
          }}</a-descriptions-item>
          <a-descriptions-item label="取件完成时间">{{
            orderList.estimatedArrivalTime
          }}</a-descriptions-item>
        </a-descriptions>
      </a-collapse-panel>
    </a-collapse>
  </div>

  <div class="feiyong">
    <a-collapse :default-active-key="['1']">
      <a-collapse-panel
        header="费用信息"
        style="background: rgb(248, 250, 255)"
        defaultExpandAllRows="true"
        :key="1"
      >
        <a-descriptions>
          <a-descriptions-item label="运费">{{ orderList.amount }} 元</a-descriptions-item>
          <a-descriptions-item label="支付方式">{{
            getMethodText(orderList.paymentMethod)
          }}</a-descriptions-item>
          <a-descriptions-item label="付款状态">{{
            getPayStatusText(orderList.paymentStatus)
          }}</a-descriptions-item>
        </a-descriptions>
      </a-collapse-panel>
    </a-collapse>
  </div>

  <div class="huopin">
    <a-collapse :default-active-key="['1']">
      <a-collapse-panel header="货品信息" style="background: rgb(248, 250, 255)" :key="1">
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<style scoped>
.views {
  background-color: #fff;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.message {
  margin-top: 30px;
  margin-bottom: 30px;
}

.guiji {
  margin-top: 30px;
}
.qujian {
  margin-top: 30px;
  margin-bottom: 30px;
}

.feiyong {
  margin-bottom: 30px;
}

/* .map-container {
  padding: 20px;
  height: 100%;
} */

#mapContainer {
  overflow: hidden;
  width: 100%;
  padding: 20px;
  height: 100%;
  margin: 0;
  font-family: '微软雅黑';
}
</style>
